<template>
  <div>
    <h1>标题</h1>
    <button @click="fetchUsers">查用户</button>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.username }}-{{user.borrowedBookId}}-{{user.borrowedTime}}</li>
    </ul>
    <button @click="showAddUserForm = !showAddUserForm">显示/隐藏添加用户表单</button>
    <form v-show="showAddUserForm" @submit.prevent="submitUser">
      <label for="username">用户名:</label><br>
      <input v-model="username" type="text" id="username" name="username" required><br>
      <label for="password">密码:</label><br>
      <input v-model="password" type="password" id="password" name="password" required><br>
      <input type="submit" value="提交用户">
    </form>
    <button @click="showDeleteUserForm = !showDeleteUserForm">显示/隐藏删除用户表单</button>
    <form v-show="showDeleteUserForm" @submit.prevent="deleteUser">
      <label for="usernameToDelete">输入要删除的用户名:</label><br>
      <input v-model="usernameToDelete" type="text" id="usernameToDelete" name="usernameToDelete" required><br>
      <input type="submit" value="删除用户">
    </form>
    <hr>
    <button @click="checkBooks">查看所有未被借阅书籍</button>
    <ul>
      <li v-for="book in books" :key="book.book_id">
        {{ book.bookId }} - {{ book.bookName }}
      </li>
    </ul>
    <br>
    <button @click="showAddBookForm = !showAddBookForm">显示/隐藏上架书籍表单</button>
    <form v-show="showAddBookForm" @submit.prevent="addBook">
      <label for="bookId">书籍ID:</label><br>
      <input v-model="bookId" type="text" id="bookId" name="bookId" required><br>
      <label for="bookName">书名:</label><br>
      <input v-model="bookName" type="text" id="bookName" name="bookName" required><br>
      <input type="submit" value="上架书籍">
    </form>
    <button @click="showRemoveBookForm = !showRemoveBookForm">显示/隐藏下架书籍表单</button>
    <form v-show="showRemoveBookForm" @submit.prevent="removeBook">
      <label for="bookIdToRemove">输入要下架的书籍ID:</label><br>
      <input v-model="bookIdToRemove" type="text" id="bookIdToRemove" name="bookIdToRemove" required><br>
      <input type="submit" value="下架书籍">
    </form>
    <br>
    <button @click="showBorrowedBooks">查看已被借阅的书籍</button>
    <!-- 显示已借阅的书籍 -->
    <ul v-show="showBorrowedBooksList">
      <li v-for="book in borrowedBooks" :key="book.book_id">
        <!--{{ book.username }} - -->{{ book.bookId }} - {{ book.bookName }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "managerPage",
  data() {
    return {
      users: [],
      username: '',
      password: '',
      usernameToDelete: '',
      showAddUserForm: false,
      showDeleteUserForm: false,
      books: [],
      bookId: '',
      bookName: '',
      showAddBookForm: false,
      bookIdToRemove: '',
      showRemoveBookForm: false,
      borrowedBooks: [],
      showBorrowedBooksList: false,
    };
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.post('http://localhost:8889/api/admin/get_userlist');
        console.log(response.data.data);
        this.users = response.data.data;
      } catch (error) {
        console.error('请求失败：', error);
      }
    },
    async submitUser() {
      try {
        const response = await axios.post('http://localhost:8889/api/admin/add_user', {
          username: this.username,
          password: this.password
        });
        console.log(response.data);
        this.fetchUsers();
      } catch (error) {
        console.error('提交失败：', error);
      }
    },
    async deleteUser() {
      try {
        const response = await axios.delete(`http://localhost:8889/api/admin/delete_user/${this.usernameToDelete}`);
        console.log(response.data);
        this.fetchUsers();
      } catch (error) {
        console.error('提交失败：', error);
      }
    }
    ,
    async checkBooks() {
      try {
        const response = await axios.post('http://localhost:8889/api/admin/get_booklist0');
        console.log(response.data.data);
        this.books = response.data.data;
      } catch (error) {
        console.error('请求失败：', error);
      }
    },
    async addBook() {
      try {
        const response = await axios.post('http://localhost:8889/api/admin/add_book', {
          bookId: this.bookId,
          bookName: this.bookName
        });
        console.log(response.data);
        this.checkBooks();
      } catch (error) {
        console.error('提交失败：', error);
      }
    },
    async removeBook() {
      try {
        const response = await axios.delete(`http://localhost:8889/api/admin/delete_book/${this.bookIdToRemove}`);
        console.log(response.data);
        this.checkBooks();
      } catch (error) {
        console.error('提交失败：', error);
      }
    },
    async showBorrowedBooks() {
      try {
        const response = await axios.post('http://localhost:8889/api/admin/get_booklist1');
        this.borrowedBooks = response.data.data;
        this.showBorrowedBooksList = true;
      } catch (error) {
        console.error('请求失败：', error);
      }
    },
  }
};
</script>

<style>
/* 你可以在这里添加你的 CSS 样式 */
</style>
